<template>
  <div>
    <el-card class="box-card"
      style="margin-top: 26px; margin-left: 14px;width: 98% ;vertical-align: middle;height:600px;">
      <div style="margin-left:14px;width: 98%;margin-bottom: 20px;">
        <el-row>
          <el-button @click="add()" style="margin-left: 16px;">新增</el-button>
          <el-button @click="edit()" style="margin-left: 16px;">编辑</el-button>
          <el-button @click="del()">删除</el-button>
          <el-button @click="status(0)">启动</el-button>
          <el-button @click="status(1)">停用</el-button>
          <el-button style="float: right;margin-right:14px;" type="primary" icon="el-icon-search"
            @click="search()">搜索</el-button>
          <el-input style="float: right; width: 200px;margin-right:20px;" v-model="ss"
            placeholder="请输入仓库编码或名称"></el-input>
        </el-row>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">

          <el-card style="height:100%" class="box-card2">
            <div style="padding:8px 0px 0px 12px;" slot="header" class="clearfix">
              <span>{{ pd }}</span>
            </div>
            <el-form :label-position="labelPosition" label-width="100px" :model="form">
              <el-form-item label="上级类型">
                <el-select v-model="form.warehouseParent" style="width: 320px;" placeholder="请选择">
                  <el-option label="无父级" value="0"></el-option>
                  <el-option label="有父级" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="仓库名称">
                <el-input v-model="form.warehouseName"></el-input>
              </el-form-item>
              <el-form-item label="负责部门">
                <el-input v-model="form.dept.deptName" style="width: 100%" readonly="true">
                  <el-button slot="append" icon="el-icon-search" @click="dlist()"></el-button>
                </el-input>

                <el-dialog v-model="dclerk" :visible.sync="dclerk" style="width: 80%; margin-left: 15%">

                  <el-button style="float: right;margin-right:14px;" type="primary" icon="el-icon-search"
                    @click="dsearch()">搜索</el-button>
                  <el-input style="float: right; width: 300px;margin-right:20px;" v-model="dss"></el-input>
                  <el-table ref="utableData" :data="dtableData.records" tooltip-effect="dark" style="width: 100%"
                    @selection-change="dhandleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="deptId" label="序号" type="hidden">
                    </el-table-column>
                    <el-table-column prop="deptName" label="负责部门">
                    </el-table-column>
                  </el-table>
                  <div class="block">
                    <el-pagination style="margin-left: 14px;margin-top:20px;" :total="this.dtableData.total"
                      @size-change="dhandleSizeChange" @current-change="dhandleCurrentChange"
                      :current-page="this.dtableData.page" :page-sizes="[2, 4]" :page-size="this.dtableData.size"
                      layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                  </div>
                  <el-button @click="dpd()">确定</el-button>
                </el-dialog>

              </el-form-item>
              <el-form-item label="负责人">
                <el-input v-model="form.user.userName" style="width: 100%" readonly="true"><el-button slot="append"
                    icon="el-icon-search" @click="ulist"></el-button></el-input>
              </el-form-item>

              <el-dialog v-model="clerk" :visible.sync="clerk" style="width: 80%; margin-left: 15%">
                <el-button style="float: right;margin-right:14px;" type="primary" icon="el-icon-search"
                  @click="usearch()">搜索</el-button>
                <el-input style="float: right; width: 300px;margin-right:20px;" v-model="uss"></el-input>
                <el-table ref="dtableData" :data="utableData.records" tooltip-effect="dark" style="width: 100%"
                  @selection-change="uhandleSelectionChange">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column prop="userId" label="序号" type="hidden">
                  </el-table-column>
                  <el-table-column prop="userName" label="负责人">
                  </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination style="margin-left: 14px;margin-top:20px;" :total="this.utableData.total"
                    @size-change="uhandleSizeChange" @current-change="uhandleCurrentChange"
                    :current-page="this.utableData.page" :page-sizes="[2, 4]" :page-size="this.utableData.size"
                    layout="total, sizes, prev, pager, next, jumper">
                  </el-pagination>
                </div>
                <el-button @click="upd()">确定</el-button>
              </el-dialog>
              <el-form-item label="联系方式">
                <el-input v-model="form.user.userPhone"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="resource">
                <el-radio-group v-model="form.warehouseState">
                  <el-radio label="启用" value="0"></el-radio>
                  <el-radio label="停用" value="1"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="备注" prop="noet">
                <el-input type="textarea" v-model="form.noet"> </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type=" primary" @click="onSubmit">立即创建</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-drawer>
      </div>
      <div style=" margin-left:14px;width: 98%;">
        <el-table ref="multipleTable" :data="tableData.records" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="warehouseId" label="序号">
          </el-table-column>
          <el-table-column prop="warehouseName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="code" label="仓库名称编码">
          </el-table-column>
          <el-table-column prop="dept.deptName" label="负责部门">
          </el-table-column>
          <el-table-column prop="user.userName" label="负责人">
          </el-table-column>
          <el-table-column prop="user.userPhone" label="联系方式">
          </el-table-column>
          <el-table-column prop="warehouseState" label="状态">
          </el-table-column>
          <el-table-column prop="noet" label="备注">
          </el-table-column>
        </el-table>
      </div>

      <div class="block">
        <el-pagination style="margin-left: 14px;margin-top:20px;" :total="this.tableData.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.tableData.page"
          :page-sizes="[2, 4]" :page-size="this.tableData.size" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-card>

  </div>

</template>

<script>
import axios from 'axios';
import { houseConfig } from '@/api/set/house';

export default {
  mounted() {
    this.init();
  },
  methods: {
    upd() {
      console.log(this.umultipleSelection);
      this.form.user.userName = this.umultipleSelection[0].userName
      this.form.warehouseUserId = this.umultipleSelection[0].userId
      this.clerk = false
    },
    dpd() {
      console.log(this.dmultipleSelection);
      this.form.dept.deptName = this.dmultipleSelection[0].deptName
      this.form.warehouseDeptId = this.dmultipleSelection[0].deptId
      this.dclerk = false
    },
    //user列表
    ulist() {
      this.clerk = true;
      axios
        .get('http://localhost:9286/warehouse/ulist', { params: { page: this.upage, size: this.usize, condition: this.uss } })
        .then(res => {
          console.log(res.data);

          this.utableData = res.data;
        })
    },
    //dept列表
    dlist() {
      this.dclerk = true;
      axios
        .get('http://localhost:9286/warehouse/dlist', { params: { page: this.dpage, size: this.dsize, condition: this.dss } })
        .then(res => {
          console.log(res.data);
          this.dtableData = res.data;
        })
    },
    //搜索
    search() {
      this.init();
    },
    //搜索
    usearch() {
      this.ulist();
    },
    //搜索
    dsearch() {
      this.dlist();
    },
    //页数
    handleSizeChange(val) {
      this.size = val;
      this.init();
    },
    init() {
      axios
        .get('http://localhost:9286/warehouse/list', { params: { page: this.page, size: this.size, condition: this.ss } })
        .then(res => {
          console.log(res.data);
          for (var i = 0; i < res.data.records.length; i++) {
            if (res.data.records[i].warehouseState == 0) {
              res.data.records[i].warehouseState = "启用"
            } else {
              res.data.records[i].warehouseState = "停用"
            }
          }
          this.tableData = res.data;
        })
    },
    //当前页
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },
    //切换页面
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //当前页
    dhandleCurrentChange(val) {
      this.dpage = val;
      this.dlist();
    },
    //切换页面
    dtoggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //当前页
    uhandleCurrentChange(val) {
      this.upage = val;
      this.ulist();
    },
    //切换页面
    utoggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //一件选取
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    uhandleSelectionChange(val) {
      this.umultipleSelection = val;
      console.log(this.umultipleSelection);
    },
    dhandleSelectionChange(val) {
      this.dmultipleSelection = val;
      console.log(this.dmultipleSelection);
    },
    //编辑
    edit() {
      this.pd = "编辑仓库";
      this.drawer = true
      if (this.multipleSelection.length == 1) {
        this.form = this.multipleSelection[0];
        console.log(this.form);
      } else {
        console.log("不是");
      }
    },
    //新增
    add() {
      this.pd = "新建仓库";
      this.drawer = true

      this.form = {
        TableName: "device_warehouse",
        dept: {
          deptName: ""
        },
        user: {
          userName: "",
          userPhone: ""
        },
        warehouseName: "",
        warehouseState: "",
        noet: ""
      }
    },
    //抽屉按钮
    onSubmit() {

      if (this.pd == "新建仓库") {
        houseConfig('add', this.form).then(res => {
          console.log(res)
          this.drawer = false
        })
        this.init();
      } else {
        houseConfig('update', this.form).then(res => {
          console.log(res)
          this.drawer = false
        })
        this.init();
      }
    },
    //删除
    del() {
      var lists = {}
      lists = this.multipleSelection[0]
      houseConfig('delete', lists).then(res => {
        console.log(res);
        this.init();
      })

    },
    //更改状态
    status(val) {
      var lists = {}

      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.multipleSelection[i].warehouseState = val;
        lists = this.multipleSelection[i];
        houseConfig('updateState', lists).then(res => {
          console.log(res);
          this.init();
        })
      }

    }
  },
  data() {
    return {
      checkTable: [],
      dclerk: false,
      clerk: false,
      ss: "",
      page: 1,
      size: 4,
      dss: "",
      upage: 1,
      usize: 4,
      uss: "",
      dpage: 1,
      dsize: 4,
      pd: "",
      form: {
        dept: {
          deptName: ""
        },
        user: {
          userName: "",
          userPhone: ""
        },
        warehouseDeptId: "",
        warehouseUserId: "",
        warehouseName: "",
        code: "",
        warehouseState: "",
        noet: ""
      },
      formLabelAlign: [{
        dept: {
          deptName: ""
        },
        user: {
          userName: "",
          userPhone: ""
        },
        warehouseDeptId: "",
        warehouseUserId: "",
        warehouseName: "",
        code: "",
        warehouseState: "",
        noet: ""
      }]
      ,
      drawer: false,
      tableData: [],
      utableData: [],
      dtableData: [],
      multipleSelection: [],
      umultipleSelection: [],
      dmultipleSelection: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  }
}
</script>